<template>
	<div class="user public">
		<!-- 面包屑 -->
		<el-breadcrumb separator=">" class="crumbs">
			<el-breadcrumb-item :to="{ path: '/user'}">用户信息</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 查询条件 -->
		<el-row :gutter="20">
			<el-col :sm="20">
				<el-row :gutter="40">
					<el-col :sm="12" :xs="24" class="userInfoBox">
						<el-row :gutter="20">
							<el-col :span="8" class="userInfoOption">
								用户编码
							</el-col>
							<el-col :span="16">
								<el-input v-model="userId" placeholder="请输入内容"></el-input>
							</el-col>
						</el-row>
					</el-col>
					<el-col :sm="12" :xs="24" class="userInfoBox">
						<el-row>
							<el-col :span="8" class="userInfoOption">
								用户姓名
							</el-col>
							<el-col :span="16">
								<el-input v-model="username" placeholder="请输入内容"></el-input>
							</el-col>
						</el-row>
					</el-col>
					<el-col :sm="12" :xs="24" class="userInfoBox">
						<el-row :gutter="20">
							<el-col :span="8" class="userInfoOption">
								是否有效
							</el-col>
							<el-col :span="16">
								<el-select v-model="active" placeholder="请选择" class="userInfoSelect">
									<el-option label="全部" :value="null"></el-option>
									<el-option label="有效" :value="'1'"></el-option>
									<el-option label="无效" :value="'0'"></el-option>
								</el-select>
							</el-col>
						</el-row>
					</el-col>
					<el-col :sm="12" :xs="24" class="userInfoBox">
						<el-row>
							<el-col :span="8" class="userInfoOption">
								所属机构
							</el-col>
							<el-col :span="16">
								<el-select v-model="organId" placeholder="请选择" class="selectBox">
									<el-option key="" label="全部" value=""></el-option>
									<el-option v-for="item in supOrganizations" :key="item.value" :label="item.name" :value="item.id"></el-option>
								</el-select>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-col>
			<el-col :sm="4" class="inquireBox">
				<el-button class="inquireBtn" @click="inquire">查 询</el-button>
			</el-col>
		</el-row>
		<!--  -->
		<!-- 添加用户按钮 -->
		<el-button class="addUserBtn" @click="operation('add')" v-if="s.indexOf('rbac:user:add') != -1">添加用户</el-button>
		<!-- 列表展示 -->
		<el-table :data="tableData" border style="width: 100%" stripe class="table">
			<el-table-column prop="code" label="用户编码" width="200"> </el-table-column>
			<el-table-column prop="realname" label="用户姓名" width="200"> </el-table-column>
			<el-table-column prop="username" label="用户账号" width="200"> </el-table-column>
			<el-table-column prop="mobile" label="手机号" width="200"> </el-table-column>
			<el-table-column prop="email" label="邮箱" width="200"> </el-table-column>
			<el-table-column prop="organization.name" label="所属机构" width="200"> </el-table-column>
			<el-table-column prop="position.positionName" label="所属职位" width="200"> </el-table-column>
			<el-table-column prop="active" label="是否有效" width="100"> </el-table-column>
			<el-table-column fixed="right" label="操作" width="200">
				<template scope="scope">
					<el-button type="text" size="small" @click="operation('amend',scope.$index)" v-show="s.indexOf('rbac:user:edit') != -1">修改</el-button>
					<el-button type="text" size="small" @click="operation('del',scope.$index)" v-show="s.indexOf('rbac:user:delete') != -1" v-if="tableData[scope.$index].active == '是'">冻结</el-button>
					<el-button type="text" size="small" @click="operation('recover',scope.$index)" v-show="s.indexOf('rbac:user:delete') != -1"
					 v-if="tableData[scope.$index].active == '否'">恢复</el-button>
					<el-button type="text" size="small" @click="operation('resetPassword',scope.$index)" v-show="s.indexOf('rbac:user:reset-password') != -1">重置密码</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination class="sorter" @current-change="handleCurrentChange" :current-page.sync="totalPages" :page-size="10" layout="prev, pager, next, jumper"
		 :total="totalElements">
		</el-pagination>
	</div>
</template>
<script>
	export default {
		name: "user",
		data() {
			return {
				s: this.permissions,
				tableData: [],
				userId: "",
				username: "",
				active: "",
				organId: "",
				totalPages: 1,
				totalElements: 0,
				supOrganizations: [],
				params: {},
				page: ""
			};
		},
		methods: {
			// 分页信息
			handleCurrentChange(val) {
				this.page = val;
				this.inquire()
			},
			// 用户操作
			operation(type, index) {
				if ("add" == type) {
					this.$router.push("/addUser");
					return;
				}
				var userId = this.tableData[index].id;
				// 修改信息
				if ("amend" == type) {
					this.$router.push({
						path: "amendUser",
						query: {
							id: userId
						}
					});
				}
				//
				if ("del" == type) {
					this.$http
						.post(this._path + "/users/" + userId + "/delete", { id: userId })
						.then(res => {
							if ("SUCCESS" == res.data.code) {
								this.$message({
									message: "冻结成功",
									type: "success",
									duration: 1500,
									showClose: true
								});
								this.inquire()
								// this.$http.get(this._path + "/users").then(res => {
								// 	this.tableData = res.data.data.page.content;
								// 	for (let i = 0; i < this.tableData.length; i++) {
								// 		if (this.tableData[i].active) {
								// 			this.tableData[i].active = "是";
								// 		} else {
								// 			this.tableData[i].active = "否";
								// 		}
								// 	}
								// });
							} else {
								this.requestError(res.data, this);
							}
						});
				}
				// 恢复
				if ("recover" == type) {
					this.$http
						.post(this._path + "/users/" + userId + "/recovery", { id: userId })
						.then(res => {
							if ("SUCCESS" == res.data.code) {
								this.$message({
									message: "恢复成功",
									type: "success",
									duration: 1500,
									showClose: true
								});
								this.inquire()
								// this.$http.get(this._path + "/users").then(res => {
								// 	this.tableData = res.data.data.page.content;
								// 	for (let i = 0; i < this.tableData.length; i++) {
								// 		if (this.tableData[i].active) {
								// 			this.tableData[i].active = "是";
								// 		} else {
								// 			this.tableData[i].active = "否";
								// 		}
								// 	}
								// });
							} else {
								this.requestError(res.data, this);
							}
						});
				}
				// 重置密码
				if ("resetPassword" == type) {
					var params = { id: userId, password: "123456" };
					this.$http({
						url: this._path + "/users/" + userId + "/password/reset",
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						method: "POST",
						data: Qs.stringify(params)
					}).then(res => {
						if (res.data.code == "SUCCESS") {
							this.$message({
								message: "重置成功",
								type: "success",
								duration: 1500,
								showClose: true
							});
						} else {
							this.$message({
								message: "重置失败",
								type: "error",
								duration: 1500,
								showClose: true
							});
						}
					});
				}
			},
			// 查询按钮;
			paramsFn() {
				this.params = {
					code: this.userId,
					realname: this.username,
					orgId: this.organId,
					active: this.active,
					page: this.page
				};
			},
			inquire() {
				this.paramsFn()
				$.get(this._path + "/users", this.params, res => {
					this.tableData = res.data.page.content;
					for (let i = 0; i < this.tableData.length; i++) {
						if (this.tableData[i].active) {
							this.tableData[i].active = "是";
						} else {
							this.tableData[i].active = "否";
						}
					}
					this.totalElements = res.data.page.totalElements;
				});
			}
		},
		created() {
			this.$http.get(this._path + "/users").then(res => {
				if (res.data.code == "SUCCESS") {
					this.tableData = res.data.data.page.content;
					for (let i = 0; i < this.tableData.length; i++) {
						if (this.tableData[i].active) {
							this.tableData[i].active = "是";
						} else {
							this.tableData[i].active = "否";
						}
					}
					this.totalElements = res.data.data.page.totalElements;
				} else {
					this.requestError(res.data, this);
				}
			});
			this.$http.get(this._path + "/organizations").then(res => {
				if (res.data.code == "SUCCESS") {
					this.supOrganizations = res.data.data.organizations;
				} else {
					this.requestError(res.data, this);
				}
			});
		}
	};

</script>

<style scoped lang="scss">
	@import "./../style/public.scss";
	@import "./../style/user.scss";
</style>
